﻿<template>
  <a-modal
    :title="title"
    width="780px"
    :visible="visible"
    dialogClass="zero-modal"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <div class="entry-notes-modal-content">
        <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="单据编号">
                <a-input disabled v-decorator="['orderNo',{rules:[{required:true,message:'单据编号不可为空！'}]}]">
                  <a-icon slot="addonAfter" @click="refreshOrderNo" type="sync" />
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="入库单类别">
                <a-select allow-clear style="width: 100%" placeholder="请选择入库单类别" v-decorator="['orderSubclass', {rules: [{ required: true, message: '请选择入库单类别！' }]}]">
                  <a-select-option v-for="(item,index) in orderSubclassData" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="入库口">
                <a-select mode="multiple" allow-clear style="width: 100%" placeholder="请选择入库口" v-decorator="['preferredPortArr', {rules: [{required:true,message:'入库口不可为空！'}]}]">
                  <a-select-option v-for="(item,index) in preferredPortList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="下料产线">
                <a-select allow-clear style="width: 100%" placeholder="请选择下料产线" v-decorator="['blankingProductionLine', {rules: [{required:true,message:'下料产线不可为空！'}]}]">
                  <a-select-option v-for="(item,index) in blankingProductionLineList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="批次">
                <a-input placeholder="请输入批次" allow-clear v-decorator="['batch',{rules:[{required:true,message:'批次不可为空！'}]}]" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="批次总数">
                <a-input-number allow-clear style="width: 100%" v-decorator="['orderQuantityTotal',{rules:[
                  { required: true, message: '批次总数不可为空！' },
                  { validator: interalNumberValidate }
                ],validateFirst:true}]" :min="0" placeholder="请输入批次总数" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="流水号">
                <a-input-number style="width: 100%" allow-clear v-decorator="['serialNo',{rules:[{ validator: interalNumberValidate }]}]" :min="0" placeholder="请输入流水号" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="密度">
                <a-input placeholder="请输入密度" allow-clear v-decorator="['materialDensity',{rules:[{required:true,message:'密度不可为空！'}]}]" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item label="长">
                    <a-input-number placeholder="请输入长" allow-clear style="width: 100%" v-decorator="['long',{rules:[{ validator: numberValidate }]}]" :min="0" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="宽">
                    <a-select style="width: 100%" allow-clear placeholder="请选择宽" v-decorator="['wide', {rules: [{validator: numberValidate}]}]">
                      <a-select-option v-for="(item,index) in wideOptions" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="高">
                    <a-input-number placeholder="请输入高" allow-clear style="width: 100%" v-decorator="['high',{rules:[{ validator: numberValidate }]}]" :min="0" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <a-form-item label="备注">
                <a-input placeholder="请输入备注" allow-clear :max-length="30" v-decorator="['remarks']" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-spin>
    
    <template slot="footer">
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="handleSubmit">确认</a-button>
    </template>
  </a-modal>
</template>
 
<script>
  import { FoamingRuKuOrderAdd,FoamingRuKuOrderEdit,FoamingRuKuOrderGetNo, FoamingRuKuOrderGetMaterialWide } from '@/api/modular/main/FoamingRuKuOrderManage'
  export default {
    emits:['callback'],
    props:{
      orderSubclassData:{
        type:Array,
        default:function(){
          return []
        }
      },
      preferredPortList:{
        type:Array,
        default:function(){
          return []
        }
      }
    },
    data () {
      return {
        id:null,
        type:'',
        labelCol: {
          span:24
        },
        wrapperCol: {
          span:24
        },
        visible: false,
        confirmLoading: false,
        title:'',
        blankingProductionLineList:[],
        form: this.$form.createForm(this),
        wideOptions:[]
      }
    },
    created(){
      this.blankingProductionLineList = this.$options.filters['dictData']('blanking_production_line')
    },
    methods: {
      // 初始化方法
      init (type,record) {
        this.type = type;
        this.visible = true
        let _initForm = {}
        if (type==='add'){
          this.title="新增入库单"
          _initForm.blankingProductionLine = '1'
          _initForm.orderSubclass = 408737870467141
          this.$loading.show()
          this.getOrderNo((f,str)=>{
            if (f) {
               _initForm.orderNo = str
            }
            this.$nextTick(()=>{
              this.form.setFieldsValue(_initForm)
            })
            this.getWideOptions(()=>{
              this.$loading.hide()
            },false)
          },false)
        } else {
          this.title="编辑入库单"
          _initForm.orderNo = record.orderNo
          _initForm.orderSubclass = record.orderSubclass
          if (record.preferredPort) {
            _initForm.preferredPortArr = record.preferredPort.split(',')
          } else {
            _initForm.preferredPortArr = []
          }
          _initForm.batch = record.batch
          _initForm.orderQuantityTotal = record.orderQuantityTotal
          _initForm.materialDensity = record.materialDensity
          _initForm.blankingProductionLine = String(record.blankingProductionLine)
          _initForm.long = record.long
          _initForm.wide = record.wide
          _initForm.high = record.high
          _initForm.serialNo = record.serialNo
          _initForm.remarks = record.remarks
          this.id = record.id
          this.$nextTick(()=>{
            this.form.setFieldsValue(_initForm)
          })
          this.getWideOptions()
        }
      },
      getOrderNo(callback,needLoading=true){
        if (needLoading) {
          this.$loading.show()
        }
        FoamingRuKuOrderGetNo().then((d)=>{
          callback(true,d.data)
          if (needLoading) {
            this.$loading.hide()
          }
        }).catch(()=>{
          callback(false)
          if (needLoading) {
            this.$loading.hide()
          }
        })
      },
      getWideOptions(callback,needLoading=true){
        if (this.wideOptions.length>0) {
          callback && callback(true)
        } else {
          if (needLoading) {
            this.$loading.show()
          }
          FoamingRuKuOrderGetMaterialWide().then((d)=>{
            this.wideOptions = d.data || []
            callback && callback(true)
            if (needLoading) {
              this.$loading.hide()
            }
          }).catch(()=>{
            callback && callback(false)
            if (needLoading) {
              this.$loading.hide()
            }
          })
        }
      },
      interalNumberValidate(rule, value, callback){
        if (value<=0){
          callback('必须大于0');
        } else if (Number(value)!==parseInt(value)) {
          callback('只能是整数');
        } else {
          callback();
        }
      },
      numberValidate(rule, value, callback){
        if (value<=0){
          callback('必须大于0');
        } else {
          callback();
        }
      },
      refreshOrderNo(){
        if (this.type==='edit') return false;
        this.getOrderNo((f,str)=>{
          if (f) {
            let _initForm = {orderNo:str}
            this.$nextTick(()=>{
              this.form.setFieldsValue(_initForm)
            })
          }
        })
      },
      handleSubmit () {
       this.form.validateFields((errors, values) => {
         if (!errors) {
           this.$loading.show()
           this.handleSubmitAjax({...values},(f)=>{
             this.$loading.hide()
             if (f) {
               this.$message.success('操作成功！');
               this.handleCancel()
               this.$emit('callback')
             }
           })
         }
       })
      },
      handleSubmitAjax (params,callback){
       if (this.$getObjectType(params.preferredPortArr)==='array') {
         params.preferredPort = params.preferredPortArr.join(',')
       }
       delete params.preferredPortArr
       if (this.type==='add') {
         this.handleAddAjax(params,callback)
       } else {
         this.handleEditAjax(params,callback)
       }
      },
      handleAddAjax(params,callback){
       let _params = {...params}
       FoamingRuKuOrderAdd(_params).then(()=>{
         callback(true)
       }).catch(()=>{
         callback(false)
       })
      },
      handleEditAjax(params,callback){
       let _params = {...params}
       _params.id = this.id;
       FoamingRuKuOrderEdit(_params).then(()=>{
         callback(true)
       }).catch(()=>{
         callback(false)
       })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
<style lang="less" scoped>
.entry-notes-modal-content{
  padding: 20px 16px 0 16px;
  .form-view,.action-view{
    flex-shrink: 0;
  }
  .form-view{
    background-color: #F3F7FA;
    padding-top: 20px;
  }
  .action-view{
    padding: 8px 16px;
  }
  .list-view{
    flex-grow: 1;
    padding: 0 16px;
    overflow: auto;
  }
}
</style>